<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Our Story</title>
    <link rel="shortcut icon" href=" media/favicon.ico" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jscex.js"></script>
    <script type="text/javascript" src="js/jscex-parser.js"></script>
    <script type="text/javascript" src="js/jscex-jit.js"></script>
    <script type="text/javascript" src="js/jscex-builderbase.js"></script>
    <script type="text/javascript" src="js/jscex-async.js"></script>
    <script type="text/javascript" src="js/jscex-async-powerpack.js"></script>
    <script type="text/javascript" src="js/functions.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/love.js" charset="utf-8"></script>
    <style type="text/css">
      <!--.STYLE1 {color: #666666}-->
    </style>
  </head>
  <body>
    <audio autoplay="autoplay" loop="loop"><source src="media/bgm.mp3" type="audio/mp3" /></audio>
    <div id="main">
      <div id="error">
        HZM告诉你吆:本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌或者火狐浏览器，或者其他游览器的最新版本。
      </div>
      <!--HZM告诉你吆：以下文字和字体颜色可自定义-->
      <div id="wrap">
        <div id="text">
          <div id="code">
            <span class="say">Our Story</span><br />
            <span class="say">相识于2022-07-01</span><br />
            <span class="say">到今天已经画了好多的大饼了</span><br />
            <span class="say">去沙漠游玩</span><br />
            <span class="say">北京野生动物园一日游</span><br />
            <span class="say">加拿大 看极光</span><br />
            <span class="say">哈尔滨 冰雪大世界</span><br />
            <span class="say">簋街 小龙虾</span><br />
            <span class="say">海鲜自助 第六季 初色</span><br />
            <span class="say">洛阳 十字街 小吃</span><br />
            <span class="say">那家羊肉串</span><br />
            <span class="say">臭鳜鱼</span><br />
            <span class="say">期望未来一起完成画下的大饼 </span><br />
            <span class="say">在简单平淡的生活中，寻找快乐。 </span><br />
          </div>
        </div>
        <div id="clock-box"><div id="clock"></div></div>
        <canvas class="" id="canvas" width="1100" height="1100"></canvas>
      </div>
    </div>

    <script></script>

    <script>
      (function () {
        var canvas = $('#canvas');

        if (!canvas[0].getContext) {
          $('#error').show();
          return false;
        }

        var width = canvas.width();
        var height = canvas.height();

        canvas.attr('width', width);
        canvas.attr('height', height);

        var opts = {
          seed: {
            x: width / 2 - 20,
            color: 'rgb(190, 26, 37)',
            scale: 2
          },
          branch: [
            [
              535,
              680,
              570,
              250,
              500,
              200,
              30,
              100,
              [
                [540, 500, 455, 417, 340, 400, 13, 100, [[450, 435, 434, 430, 394, 395, 2, 40]]],
                [550, 445, 600, 356, 680, 345, 12, 100, [[578, 400, 648, 409, 661, 426, 3, 80]]],
                [539, 281, 537, 248, 534, 217, 3, 40],
                [
                  546,
                  397,
                  413,
                  247,
                  328,
                  244,
                  9,
                  80,
                  [
                    [427, 286, 383, 253, 371, 205, 2, 40],
                    [498, 345, 435, 315, 395, 330, 4, 60]
                  ]
                ],
                [546, 357, 608, 252, 678, 221, 6, 100, [[590, 293, 646, 277, 648, 271, 2, 80]]]
              ]
            ]
          ],
          bloom: {
            num: 700,
            width: 1080,
            height: 650
          },
          footer: {
            width: 1200,
            height: 5,
            speed: 10
          }
        };

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas
          .click(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
              hold = 0;
              canvas.unbind('click');
              canvas.unbind('mousemove');
              canvas.removeClass('hand');
            }
          })
          .mousemove(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass('hand', seed.hover(x, y));
          });

        var seedAnimate = eval(
          Jscex.compile('async', function () {
            seed.draw();
            while (hold) {
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
              seed.scale(0.95);
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
              seed.move(0, 2);
              foot.draw();
              $await(Jscex.Async.sleep(10));
            }
          })
        );

        var growAnimate = eval(
          Jscex.compile('async', function () {
            do {
              tree.grow();
              $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
          })
        );

        var flowAnimate = eval(
          Jscex.compile('async', function () {
            do {
              tree.flower(2);
              $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
          })
        );

        var moveAnimate = eval(
          Jscex.compile('async', function () {
            tree.snapshot('p1', 240, 0, 610, 680);
            while (tree.move('p1', 500, 0)) {
              foot.draw();
              $await(Jscex.Async.sleep(10));
            }
            foot.draw();
            tree.snapshot('p2', 500, 0, 610, 680);

            // 会有闪烁不得意这样做, (＞﹏＜)
            canvas.parent().css('background', 'url(' + tree.toDataURL('image/png') + ')');
            canvas.css('background', '#ffe');
            $await(Jscex.Async.sleep(300));
            canvas.css('background', 'none');
          })
        );

        var jumpAnimate = eval(
          Jscex.compile('async', function () {
            var ctx = tree.ctx;
            while (true) {
              tree.ctx.clearRect(0, 0, width, height);
              tree.jump();
              foot.draw();
              $await(Jscex.Async.sleep(25));
            }
          })
        );

        var textAnimate = eval(
          Jscex.compile('async', function () {
            /* 2022-07-01 9:00 */
            var together = new Date();
            together.setFullYear(2022, 07, -31); //时间年月日 注：此处修改的话是倒计时算，04,-23代表4月7日，如果是5月8日则05，22
            together.setHours(9); //小时
            together.setMinutes(0); //分钟
            together.setSeconds(0); //秒前一位
            together.setMilliseconds(0); //秒第二位

            $('#code').show().typewriter();
            $('#clock-box').fadeIn(500);
            while (true) {
              timeElapse(together);
              $await(Jscex.Async.sleep(1000));
            }
          })
        );

        var runAsync = eval(
          Jscex.compile('async', function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());

            textAnimate().start();

            $await(jumpAnimate());
          })
        );

        runAsync().start();
      })();
    </script>
    <!-- 注：添加下列HTML 5鼠标随动特效后在Mac平台浏览时会闪烁异常 -->
    <script
      type="text/javascript"
      color="102,185,255"
      zIndex="-10"
      opacity="50"
      count="99"
      src="js/canvas-nest.min.js"
    ></script>
    <!-- 如果你有强迫症的话可以直接注释掉canvas-nest.min.js就不会在Mac上闪烁了 Win和Linux没问题 -->
    <p style="text-align: center">
      <a href="pages/tools.html">工具</a>
    </p>
    <p style="text-align: center">for 琚汇超 2022-09-04</p>
  </body>
</html>
